<template>
  <div>
    <div>
    <div><center><h1>角色权限管理</h1></center></div>
    <div>
        <el-table :data="per_list" border style="width: 50%">
            <el-table-column fixed prop="id" label="ID" width="150">
          </el-table-column>
          <el-table-column fixed prop="permission" label="权限" width="150">
          </el-table-column>
          <el-table-column prop="per_url" label="路由" width="150">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <el-button @click="change(scope.row.id)" type="text" size="small"
                >修改</el-button>
              <el-button @click="del(scope.row.id)" type="text" size="small"
                >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button @click="add">新增权限</el-button>
    </div>
    <div>
          <el-drawer
              title="添加权限信息"
              :visible.sync="drawer"
              direction="rtl">
              <span>新权限:<input v-model="obj.permission"/></span><br>
              <span>新路由:<input v-model="obj.per_url"/></span><br>
              <span><el-button @click="realAdd">确认添加</el-button></span>
          </el-drawer>
    </div>
    <div>
          <el-drawer
              title="修改权限信息"
              :visible.sync="drawer1"
              direction="rtl">
              <span>新权限:<input v-model="obj1.permission"/></span><br>
              <span>新路由:<input v-model="obj1.per_url"/></span><br>
              <span><el-button @click="realChange(obj1.id)">确认修改</el-button></span>
          </el-drawer>
      </div>
  </div>
  </div>
</template>

<script>
export default {
data(){
  return{
    per_list:[],
    drawer:false,
    drawer1:false,
    obj:{
      id:'',
      permission:'',
      per_url:''
    },
    obj1:{
      id:'',
      permission:'',
      per_url:''
    }
  }
},
mounted(){
  this.Permission()
},
methods:{
  Permission(){
    this.$axios.get('users/api/v1/permission/')
    .then(res=>{
      console.log(res)
      if (res.data.code == 200){
        this.per_list = res.data.data
      }
    })
  },
  add(){
    this.drawer = true
  },
  realAdd(){
    this.$axios.post('users/api/v1/permission/',this.obj)
    .then(res=>{
      console.log(res)
      if (res.data.code == 200){
        alert(res.data.msg)
        this.drawer = false
        this.Permission()
      }
    })
  },
  change(id){
    this.drawer1=true
    this.$axios.get('users/api/v1/permission/'+id+'/')
    .then(res=>{
      console.log(res)
      if (res.data.code == 200){
        this.obj1 = res.data.data
      }
    })
  },
  realChange(id){
    this.$axios.put('users/api/v1/permission/'+id+'/',this.obj1)
    .then(res=>{
      console.log(res)
      if (res.data.code == 200){
        alert(res.data.msg)
        this.drawer1 = false
        this.Permission()
      }
    })
  },
  del(id){
    this.$axios.delete('users/api/v1/permission/'+id+'/')
    .then(res=>{
      console.log(res)
      if(res.data.code == 200){
        alert(res.data.msg)
        this.Permission()
      }
    })
  }
}
}
</script>

<style>

</style>